<template>
	<view class="container bg-red">
		<cu-custom bgColor="" :isBack="false">
			<block slot="content"><text class="text-white">参与注册</text></block>
		</cu-custom>			
		<view class="flex justify-center topImage" :style="[{top:CustomBar + 'px'}]">
			<image src="../../static/linepng.jpg" mode="widthFix"></image>
		</view>
		<view class="inputBox flex justify-center">
			<view class="BoxInput">
				<view class="flex align-center justify-between">
					<view class="inputtext">区域</view>
					<view class="inputItem  flex justify-between align-center padding-lr-sm">
						<picker @change="PickerChange" :value="index" :range="picker">
							<view class="picker">
								{{index>-1?picker[index]:'请选择'}}
							</view>
						</picker>		
						<text class="cuIcon-unfold margin-left"></text>
					</view>
				</view>
				<view class="flex align-center justify-between margin-top">
					<view class="inputtext">经销商代码</view>
					<view class="inputItem flex align-center">
						<input placeholder="请输入" type="number" v-model="sale_no" @blur="changeJxs" name="input"></input>
					</view>
				</view>
				<view class="flex align-center justify-between margin-top">
					<view class="inputtext">经销商</view>
					<view class="inputItem align-center justify-end flex padding-right">{{sale_name}}</view>
				</view>
				<view class="flex align-center justify-between margin-top">
					<view class="inputtext">姓名</view>
					<view class="inputItem flex align-center">
						<input placeholder="请输入" v-model="truename" type="text" name="input"></input>
					</view>
				</view>		
				<view class="flex align-center justify-between margin-top">
					<view class="inputtext">手机号</view>
					<view class="inputItem flex align-center">
						<input placeholder="请输入" v-model="telephone" type="number" name="input"></input>
					</view>
				</view>	
				<button class="exportBtn margin-top-lg" open-type="getUserInfo" @click="sumbit">
					提交
				</button>
			</view>
		</view>
		<view class="flex justify-center DwBox">
			<image src="../../static/dw.png" mode="widthFix" class="imgBox"></image>
			<swiper class="swiperBox" :indicator-dots="false" :autoplay="true" vertical circular :display-multiple-items="3">
				<block v-for="item in swiperList" >
				  <swiper-item>
					<view class="swiper-item-text textBox text-red">{{item.title}}</view>
				  </swiper-item>
				</block>
			</swiper>
		</view>
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<!-- <image src="/static/logo.png" mode="aspectFit"></image> -->
			<view class="gray-text">加载中...</view>
		</view>				
	</view>
</template>

<script>

	import { mapMutations } from 'vuex'
	export default {
		components:{
			
		},
		data() {
			return {
				CustomBar: this.CustomBar+10,
				index: -1,
				swiperList:['内容内容内容内dasd','内容内容内容内容as','内容内容内容内容内容内容','内容内容内容内容内容内容','内容内容内容内容as'],
				picker: [],
				sale_no:"",
				sale_name:"",
				truename:"",
				telephone:"",
				JxsList:[],
				loading:false,
				openid:""
			};
		},
		onLoad(option) {
			this.getProlist();
			this.getJxslist();
			this.getDwlist()
			this.openid = option.openid
		},
		onShow() {

		},
		methods: {
			...mapMutations(['login']),
			//提交
			sumbit(){
				let _this = this;
				if(this.loading){
					return
				}
				if(this.index==-1){
					this.$api.msg('请选择区域')
					return
				}
				if(!this.sale_no){
					this.$api.msg('请输入经销商代码')
					return
				}
				if(!this.truename){
					this.$api.msg('请输入姓名')
					return
				}		
				if(!this.telephone){
					this.$api.msg('请输入手机号')
					return
				}		
				uni.getUserInfo({
				  provider: 'weixin',
				  success:  (info)=>{
					_this.loading=true;
					if(info.errMsg=="getUserInfo:ok"){
						_this.$ComFunJS.ajax({
							method:"post",
							url:"/api/v1.0/auth/login",
							data:{
								openid:this.openid,
								img_url:info.userInfo.avatarUrl,
								province:this.picker[this.index],
								sale_no:this.sale_no,
								truename:this.truename,
								nickname:info.userInfo.nickName,
								telephone:this.telephone,
							},
							success:(res)=>{
								if(!res.data.error){
									_this.loading=false;
									_this.$api.msg('注册成功');
									_this.login(res.data.result.token)
									uni.redirectTo({
										url:'/pages/person/index'
									})
								}else{
									_this.$api.msg(res.data.result)
								}
								
							}
						})
					}
				  }
				});													
			},
			//校验
			changeJxs(data){
				this.JxsList.map((item)=>{
					if(item.sale_no==data.detail.value){
						this.sale_name = item.sale_title
					}
				});
				if(!this.sale_name){
					this.$api.msg('请输入正确的经销商代码')
				}
			},
			// 弹幕列表
			getDwlist(){
				this.$ComFunJS.ajax({
					method:'get',
					url:"/api/v1.0/draw/danmu",
					success:(res)=>{
						if(!res.data.error){
							this.swiperList = res.data.result
						}
					}
				})
			},				
			// 区域列表
			getProlist(){
				this.$ComFunJS.ajax({
					method:'get',
					url:"/api/v1.0/base/sales/area",
					success:(res)=>{
						if(!res.data.error){
							this.picker = res.data.result[0].map((item)=>{
								return item.province
							});
						}
					}
				})
			},	
			// 经销商列表
			getJxslist(){
				this.$ComFunJS.ajax({
					method:'get',
					url:"/api/v1.0/base/sales/list",
					success:(res)=>{
						if(!res.data.error){
							this.JxsList = res.data.result[0]
						}
					}
				})
			},						
			PickerChange(e) {
				this.index = e.detail.value
			},
		},

	}
</script>

<style lang="scss">
	page{
		height: 100%;
		
	}
	.container{
		height: 100%;
	}
	.topImage{
		position: absolute;
		width: 100%;
		top: 100upx;
	}
	.exportBtn{
		width: 609upx;
		height: 80upx;
		background: linear-gradient(270deg, #FF735A 0%, #F0402A 100%);
		border-radius: 40upx;
		font-size: 30upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 80upx;
	}
	.DwBox{
		padding: 0 20upx;
		margin-top: 32upx;
		width: 100%;
		box-sizing: border-box;
		height: 277upx;
		position: relative;
		.imgBox{
			width: 100%;
			top: 0;
			position: absolute;
		}
	}
	.swiperBox{
		width: 100%;
		padding-top:90upx;
		padding-left:60upx;
		height: 260upx;
		.textBox{
			margin-top:10upx;
			line-height: 26upx;
			font-size: 26upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
		}
	}
	.inputBox{
		width: 100%;
		position: relative;
		z-index: 999;
		margin-top: 220upx;
		.BoxInput{
			box-sizing: border-box;
			padding: 43upx 44upx 34upx 44upx;
			width: 690upx;
			height: 684upx;
			background: #FFFBF2;
			box-shadow: 0px 8upx 22upx 0px rgba(229, 0, 0, 0.18);
			border-radius: 10upx;
			.inputtext{
				font-size: 28upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #565656;
			}
			.inputItem{
				width: 431upx;
				height: 74upx;
				border: 1px solid #B5B5B5;
				border-radius: 6upx;
				color: #6E6E6E;
			}
		}
	}
</style>
